<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MeiDeFaGuang</title>

    <meta content='Free, do whatever you want, hi-resolution photos' property='og:description'>
    {% load staticfiles %}
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/custom.css" %}" rel="stylesheet">

</head>
<body>
<div id='resplashed'>
    <div class='top-bar'>
        <div class='container'>
            <div class='message'>meidefaguang.com</div>
            <div class='auth'>
                <div class='pull-right login js-login'>Login</div>
                <div class='pull-right logout js-logout'>Logout</div>
                <div class='pull-right profile-img'><img src='static/img/blank.gif'></div>
            </div>
        </div>
    </div>

    {#    <header class='container clearfix'>#}
    {#        <div class='col-33'>#}
    {#            <div class='search-wrapper'>#}
    {#                <div class='clear-search js-clear-search'>&times;</div>#}
    {#                <form method="POST" action="">#}
    {#                    <input type="hidden" name="CSName" value="CSGuard_656018072"/>#}
    {#                    <input type="hidden" name="CSToken"#}
    {#                           value="da6491eb203045b96dc752551baa3ed32a9a6a2a3ef006efcc7b93819d1c201f669c19cfb5b437ec1af817ed6cea783b5fc7e5f50ac61f8bfe69d59c136adf3c"/>#}
    {#                    <input class='search' name="search_tag" type='text' placeholder='Filter Images By Tag...'#}
    {#                           autofocus='autofocus'>#}
    {#                </form>#}
    {#            </div>#}
    {#        </div>#}
    {#        <div class='col-33'>#}
    {#            <h1><strong>re</strong>:MeiDeFaGuang</h1>#}
    {#        </div>#}
    {#        <div class='col-33'>#}
    {#            <div class='share'>#}
    {#                <a href='https://facebook.com/sharer.php?u=http://www.resplashed.com/?r=fb' target='_blank'#}
    {#                   class='facebook'>Share</a>#}
    {#                <a href='http://twitter.com/share?text=%0AFree%2C%20do%20whatever%20you%20want%2C%20hi-resolution%20photos%20-%20&url=http://www.resplashed.com/?r=tw&hashtags=resplashed&via=twanlass'#}
    {#                   target='_blank' class='twitter'>Tweet</a>#}
    {#            </div>#}
    {#        </div>#}
    {#    </header>#}
    <div class='container'>
        <h2 class="web-title"><span id='img-count'>1162</span> MeiDeFaGuang de images for your .</h2>
    </div>


    <div class='hot container'>
        <div class="hot-row row">
            <div class="hot-left col-lg-6 col-xs-12 c49" >
                <div class="img-item">
                    <div class="btn btn-view">view</div>
                    <div class="details">
                        <a class="photographer-credit" href="photographer/jamie_mink/">jamie mink</a>
                        <div class="tags">
                            <div class="tag js-filter-tag"><a href="tag/rust/">Rust</a></div>
                            <div class="tag js-filter-tag"><a href="tag/old/">Old</a></div>
                            <div class="tag js-filter-tag"><a href="tag/car/">Car</a></div>
                        </div>
                    </div>
                    <a href="static/images/first.jpg">
                        <div class="shade"></div>
                        <img src="static/images/first.jpg" class="loaded"></a>
                </div>
            </div>
            <div class="hot-right col-lg-6 col-xs-12 c49" >
                <div class="hot-top row">
                        <div class="hot-top-left col-lg-6 col-xs-6 c49" >
                            <div class="img-item">
                    <div class="btn btn-view">view</div>
                    <div class="details">
                        <a class="photographer-credit" href="photographer/jamie_mink/">jamie mink</a>
                        <div class="tags">
                            <div class="tag js-filter-tag"><a href="tag/rust/">Rust</a></div>
                            <div class="tag js-filter-tag"><a href="tag/old/">Old</a></div>
                            <div class="tag js-filter-tag"><a href="tag/car/">Car</a></div>
                        </div>
                    </div>
                    <a href="static/images/first.jpg">
                        <div class="shade"></div>
                        <img src="static/images/first.jpg" class="loaded"></a>
                </div>
                        </div>
                        <div class="hot-top-right col-lg-6 col-xs-6 c49">
                            <div class="img-item">
                    <div class="btn btn-view">view</div>
                    <div class="details">
                        <a class="photographer-credit" href="photographer/jamie_mink/">jamie mink</a>
                        <div class="tags">
                            <div class="tag js-filter-tag"><a href="tag/rust/">Rust</a></div>
                            <div class="tag js-filter-tag"><a href="tag/old/">Old</a></div>
                            <div class="tag js-filter-tag"><a href="tag/car/">Car</a></div>
                        </div>
                    </div>
                    <a href="static/images/first.jpg">
                        <div class="shade"></div>
                        <img src="static/images/first.jpg" class="loaded"></a>
                </div>
                        </div>
                </div>
                <div class="hot-bottom row">
                        <div class="hot-bottom-left col-lg-6 col-xs-6 c49" >
                            <div class="img-item">
                    <div class="btn btn-view">view</div>
                    <div class="details">
                        <a class="photographer-credit" href="photographer/jamie_mink/">jamie mink</a>
                        <div class="tags">
                            <div class="tag js-filter-tag"><a href="tag/rust/">Rust</a></div>
                            <div class="tag js-filter-tag"><a href="tag/old/">Old</a></div>
                            <div class="tag js-filter-tag"><a href="tag/car/">Car</a></div>
                        </div>
                    </div>
                    <a href="media/first.jpg">
                        <div class="shade"></div>
                        <img src="media/first.jpg" class="loaded"></a>
                </div>
                        </div>
                        <div class="hot-bottom-right col-lg-6 col-xs-6 c49" >
                            <div class="img-item">
                    <div class="btn btn-view">view</div>
                    <div class="details">
                        <a class="photographer-credit" href="photographer/jamie_mink/">jamie mink</a>
                        <div class="tags">
                            <div class="tag js-filter-tag"><a href="tag/rust/">Rust</a></div>
                            <div class="tag js-filter-tag"><a href="tag/old/">Old</a></div>
                            <div class="tag js-filter-tag"><a href="tag/car/">Car</a></div>
                        </div>
                    </div>
                    <a href="media/first.jpg">
                        <div class="shade"></div>
                        <img src="media/first.jpg" class="loaded"></a>
                </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class='container'>
        <div id='image-list' class='image-list'>
            <div class="row">

            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {
        var norunning = 1;
        var isIE = /msie/gi.test(navigator.userAgent);
        this.infiniteScroll = function (options) {
            if (norunning == 1) {
                var defaults = {
                    callback: function () {
                    }, distance: 50
                }
                for (var key in defaults) {
                    if (typeof options[key] == 'undefined') options[key] = defaults[key];
                }
                var scroller = {options: options, updateInitiated: false}
                window.onscroll = function (event) {
                    handleScroll(scroller, event);
                }
                document.ontouchmove = function (event) {
                    handleScroll(scroller, event);
                }
            }
        }
        function getScrollPos() {
            if (isIE) {
                return document.documentElement.scrollTop;
            } else {
                return window.pageYOffset;
            }
        }

        var prevScrollPos = getScrollPos();

        function handleScroll(scroller, event) {
            if (scroller.updateInitiated) {
                return;
            }
            var scrollPos = getScrollPos();
            if (scrollPos == prevScrollPos) {
                return;
            }
            var pageHeight = document.documentElement.scrollHeight;
            var clientHeight = document.documentElement.clientHeight;
            if (pageHeight - (scrollPos + clientHeight) < scroller.options.distance) {
                scroller.updateInitiated = true;
                scroller.options.callback(function () {
                    scroller.updateInitiated = false;
                });
            }
            prevScrollPos = scrollPos;
        }
    }());
    var pc = 0;
    var norunning = 1;
    var fuck = function(done){
        if (norunning == 1) {
                norunning = 0;
                // 1. fetch data from the server
                var d1 = document.getElementById('image-list');
                pc = pc + 1;
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                        d1.insertAdjacentHTML('beforeend', xmlhttp.responseText);
                    }
                };
                xmlhttp.open("GET", "images/page?page=" + pc, true);
                xmlhttp.send();
                norunning = 1;
                if(done) {
                    done();
                }
            }
    }
    var options = {
        distance: 50,
        callback: function (done) {
            fuck(done)
        }
    }
    fuck()
    infiniteScroll(options);
</script>
<script type="text/javascript">
    if (window !== top) top.location = window.location;
</script>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
